<template>
    <div class="title">动态组件</div>
    <div class="inner">
        <component :is="componentAlbum"></component>
        <button @click="changeComponent">组件间通信切换</button>
    </div>
</template>

<script setup>
import TextAlbumVue from '@/components/partiesView/TextAlbum.vue';
import PhotoAlbumVue from '@/components/partiesView/image.vue';
import { shallowRef } from 'vue';
let componentAlbum = shallowRef(TextAlbumVue)
function changeComponent() {
    if (componentAlbum.value.__file === PhotoAlbumVue.__file) {
        componentAlbum.value = TextAlbumVue;
    } else {
        componentAlbum.value = PhotoAlbumVue;
    }
}
</script>

<style scoped>
</style>